<template>
  <div>
    <van-nav-bar fixed title="个人中心" />
    <div class="has-top">
      <div class="head-bg-box bg-primary" />
      <!-- 背景 -->
      <router-link to="/person/setting">
        <SvgIcon icon-class="setting" class="setting-icon fs-34 pos-a" />
      </router-link>
      <!-- 设置 -->
      <div class="page-content-box mlr-25">
        <person-head :head-value="headValue" />
        <div class="flex-v-c pos-r flex-wrap mb-25">
          <router-link
            v-for="(item,index) in centerFunc"
            :key="index"
            :to="item.link"
            class="flex-item mt-25"
          >
            <div class="flex-center bg-white flex-d-c br-18 flex-s-0">
              <SvgIcon :icon-class="item.iconId" class="color-primary fs-50" />
              <p class="pt-30" style="color:#392219;">{{ item.title }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import personHead from 'components/personHead'
import { GetMemberCenterInfo } from 'api/member'
export default {
  components: {
    SvgIcon,
    personHead
  },
  data() {
    return {
      // 头部数据
      headValue: {},
      // 功能中心
      centerFunc: [
        { iconId: 'payDetail', title: '支付明细', link: '/member/list' },
        { iconId: 'withdraw', title: '提现', link: '/withdraw/apply' },
        { iconId: 'transfer', title: '转账', link: '/transfer/apply' },
        { iconId: 'commission', title: '分佣', link: '/reward/integrationReward' }
      ]
    }
  },
  computed: {
    // 计算属性的 getter
    kkamount: function() {
      // `this` 指向 vm 实例
      return this.$utils.changePrice2money(this.price)
    }
  },

  created() {
    this.GetMemberCenterInfo()
  },
  methods: {
    GetMemberCenterInfo() {
      GetMemberCenterInfo().then(res => {
        if (res) {
          this.headValue = res.Data
          if (this.headValue.MemberType === 1) {
            this.centerFunc = [
              { iconId: 'cashTotal', title: '收银汇总', link: '/storeManage/cashList' },
              { iconId: 'member', title: '我的会员', link: 'memberManage' },
              { iconId: 'cashCode', title: '收银二维码', link: '/storeManage/cashCode' },
              { iconId: 'withdraw', title: '提现', link: '/withdraw/apply' },
              { iconId: 'transfer', title: '转账', link: '/transfer/apply' },
              { iconId: 'commission', title: '分佣', link: '/reward/integrationReward' }
            ]
          } else if (this.headValue.MemberType === 2) {
            this.centerFunc = [
              { iconId: 'paperApply', title: '申请进件', link: '/merchantPaper' },
              { iconId: 'paperManage', title: '进件管理', link: '/paperManage' },
              { iconId: 'store', title: '我的门店', link: '/storeManage' },
              { iconId: 'withdraw', title: '提现', link: '/withdraw/apply' },
              { iconId: 'transfer', title: '转账', link: '/transfer/apply' },
              { iconId: 'commission', title: '分佣', link: '/reward/integrationReward' }
            ]
          }
        }
      })
    },
    goSetting() {
      console.log('go setting page')
    },
    onSubmit(values) {
      console.log('submit', values)
    },
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    },
    onChange(index) {
      console.log(index)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-icon {
  top: 132px;
  right: 32px;
}
.flex-item {
  width: 218px;
  height: 218px;
  margin-right: calc((100% - (218px * 3)) / 2);
  overflow: hidden;
  &:nth-child(3n) {
    margin-right: 0;
  }
  div {
    height: 100%;
  }
}
</style>
